<template>  
  <div class="equipment-management">  
    <el-card class="equipment-table-card">  
      <div slot="header" class="header-section">  
        <h2>智慧化污水厂 - 设备管理</h2>  
        <!-- <el-button type="primary" icon="el-icon-plus" @click="showAddModal">新增设备</el-button>   -->
      </div>  
      <!-- 设备列表 -->  
      <el-table :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}" :data="equipmentData" style="width: 100%" border stripe highlight-current-row>  
        <el-table-column  type="index" label="序列"/>
        <!-- <el-table-column prop="areaId" label="区域ID" align="center"  />   -->
        <el-table-column prop="equipmentId" label="设备ID" align="center" />  
        <el-table-column prop="equipmentType" label="设备名称" align="center" />  
        <el-table-column prop="isDelete" label="是否删除" align="center" v-if="false" />  

        <el-table-column label="操作" align="center">  
          <template slot-scope="scope">  
            <el-button disabled type="primary" size="mini" icon="el-icon-edit" @click="showEditModal(scope.row)">编辑</el-button>  
            <el-button  
            disabled
              type="danger"  
              size="mini"  
              icon="el-icon-delete"  
              @click="confirmDelete(scope.row)"  
            >  
              删除  
            </el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
    </el-card>  

    <!-- 新增/编辑设备模态框 -->  
    <el-dialog :title="isEditing ? '编辑设备' : '新增设备'" :visible.sync="formDialogVisible" width="500px">  
      <el-form :model="form" :rules="rules" ref="equipmentForm" label-width="100px">  
        <el-form-item label="设备类型" prop="equipmentType">  
          <el-input v-model="form.equipmentType" placeholder="请输入设备类型" />  
        </el-form-item>  
        <el-form-item label="区域ID" prop="areaId">  
          <el-input v-model="form.areaId" type="number" placeholder="请输入区域ID" />  
        </el-form-item>  
        <el-form-item label="设备描述" prop="equipmentDescription">  
          <el-input v-model="form.equipmentDescription" type="textarea" placeholder="请输入设备描述" />  
        </el-form-item>  
        <el-form-item label="安装日期" prop="installationDate">  
          <el-date-picker v-model="form.installationDate" type="date" placeholder="选择安装日期" />  
        </el-form-item>  
        <el-form-item label="设备状态" prop="status">  
          <el-select v-model="form.status" placeholder="选择设备状态">  
            <el-option label="运行中" value="运行中"></el-option>  
            <el-option label="维护中" value="维护中"></el-option>  
            <el-option label="停用" value="停用"></el-option>  
            <el-option label="待安装" value="待安装"></el-option>  
          </el-select>  
        </el-form-item>  
      </el-form>  
      <div slot="footer" class="dialog-footer">  
        <el-button @click="formDialogVisible = false">取消</el-button>  
        <el-button type="primary" @click="saveEquipment">保存</el-button>  
      </div>  
    </el-dialog>  
  </div>  
</template>  

<script>  
import { Message, MessageBox } from "element-ui";  
import {list,updateEquipment,addEquipment} from "@/api/wushui/equipment";
import {formatDateTime} from "@/api/tool/tool";

export default {  
  name: "EquipmentManagement",  
  data() {  
    return {  
      equipmentData: [],  
      formDialogVisible: false, // 控制模态框显示  
      isEditing: false, // 是否在编辑模式  
      form: {  
        equipment_id: null,  
        equipment_type: "",  
        area_id: "",  
        equipment_description: "",  
        installation_date: null,  
        status: "",  
      },  
      rules: {  
        equipment_type: [  
          { required: true, message: "设备类型不能为空", trigger: "blur" },  
        ],  
        area_id: [{ required: true, message: "区域ID不能为空", trigger: "blur" }],  
        status: [{ required: true, message: "设备状态不能为空", trigger: "change" }],  
      },  
    };  
  },  
  created(){
    this.getList();

  },
  methods: {
     // 获取列表数据
     getList() {
      this.loading = true;
      list(this.formData).then(response => {
        this.equipmentData = response.rows;
        console.log(response)
      });
    },  
    // 显示新增设备模态框  
    showAddModal() {  
      this.isEditing = false;  
      this.resetForm();  
      this.formDialogVisible = true;  
    },  
    // 显示编辑设备模态框  
    showEditModal(row) {  
      this.isEditing = true;  
      this.form = { ...row }; // 克隆当前数据到表单  
      this.formDialogVisible = true;  
    },  
    // 重置表单  
    resetForm() {  
      this.form = {  
        equipment_id: null,  
        equipment_type: "",  
        area_id: "",  
        equipment_description: "",  
        installation_date: null,  
        status: "",  
      };  
    },  
    // 保存数据（新增或编辑）  
    saveEquipment() {  
      this.$refs.equipmentForm.validate((valid) => {  
        if (valid) {  
          if (this.isEditing) {  
            // 编辑模式  
           
            console.log(this.form)
            updateEquipment(this.form).then((response) => {
              this.getList();
              Message.success("编辑成功！");
            }).catch(() => {
              this.$message.error("获取数据失败");
            });
          } else { 
            // 新增模式  
            this.form.installationDate =formatDateTime(this.form.installationDate);
            this.form.isDelete = '0'
            addEquipment(this.form).then((response) => {
              this.getList();
              Message.success("新增区域成功！");  
            }).catch(() => {
              this.$message.error("获取数据失败");
            }); 
          }  
          this.formDialogVisible = false;  
        }  
      });  
    },  
    // 删除设备  
    confirmDelete(row) {  
      MessageBox.confirm(  
        `确定要删除设备 "${row.equipment_type}" 吗？`,  
        "提示",  
        {  
          confirmButtonText: "确定",  
          cancelButtonText: "取消",  
          type: "warning",  
        }  
      )  
        .then(() => {  
          row.isDelete = '1'
          updateEquipment(row).then((response) => {
              this.getList();
              Message.success("设备已删除！");  
            }).catch(() => {
              this.$message.error("获取数据失败");
            });
        })  
        .catch(() => {  
          Message.info("取消删除");  
        });  
    },  
  },  
};  
</script>  

<style scoped>  
.equipment-management {  
  padding: 20px;  
}  

.header-section {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  

.dialog-footer {  
  text-align: right;  
}  

.equipment-table-card {  
  margin: 20px 0;  
}  
</style>